<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '入住信息',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <div class="content">
    <view class="cardBox" v-if="dataList.length > 0">
      <wd-card v-for="(item, index) in dataList" :key="index">
        <view>
          <template #title>
            <view class="dataTopBox mb-[20upx]">
              <view>{{ item.allocatedUserName }}</view>

              <view class="btnBox btn1">待确认</view>
            </view>
          </template>
          <view class="allInfo mb-[20upx]">
            <view class="item">
              <view class="mr-[20upx]">出差事由:</view>
              <view>{{ item.resideCause }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">申请入住日期:</view>
              <view>{{ item.resideInDate }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">预计退房日期:</view>
              <view>{{ item.resideOutDate }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">分配宿舍:</view>
              <view>{{ item.roomName }}</view>
            </view>
          </view>
          <view class="text-right">
            <text class="mr-[10upx]">
              <!-- <wd-button size="small" disabled>分配宿舍</wd-button> -->
              <wd-button size="small" @click="(selectItem = item), (showPop = true)">
                准备确认
              </wd-button>
            </text>
          </view>
        </view>
      </wd-card>
    </view>
    <wd-status-tip v-else image="search" tip="暂无数据" />
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
    <!-- 确认 -->
    <view class="oppbox">
      <wd-popup v-model="showPop" custom-style="border-radius:32rpx; width: 90%;min-height:80vh">
        <view class="p-[20upx] contentBox">
          <view class="mb-[20upx] text-[18upx]">准备确认</view>
          <wd-form :model="model">
            <wd-cell-group border>
              <wd-cell-group border>
                <wd-input
                  disabled
                  label="宿舍"
                  placeholder="无数据"
                  label-width="60px"
                  clearable
                  v-model="selectItem.roomName"
                />
                <wd-input
                  disabled
                  label="确认人"
                  placeholder="无数据"
                  label-width="60px"
                  clearable
                  v-model="userInfo.nickName"
                />
              </wd-cell-group>
            </wd-cell-group>
          </wd-form>
          <view class="text-right mt-[60upx]">
            <text class="mr-[20upx]">
              <wd-button size="small" @click="sureSubmit">确认</wd-button>
            </text>
            <wd-button type="info" size="small" @click="showPop = false">取消</wd-button>
          </view>
        </view>
      </wd-popup>
    </view>
  </div>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { getCheckInList, confirmCheckIn } from '@/api/cleaning/information.js'
import { useSysStore } from '@/store/systemInfo'
defineOptions({
  name: 'Information',
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const sysStore = useSysStore()
const scrollTop = ref(0)
const userInfo = ref({})
const dataList = ref([])
const showPop = ref(false)
const selectItem = ref({})

onMounted(() => {
  userInfo.value = { ...sysStore.userInfo }
  getList()
})

// 点击退房
const sureSubmit = async () => {
  const res = await confirmCheckIn({
    ...selectItem.value,
  })
  if (res.data.code == 200) {
    uni.showToast({
      title: '提交成功',
      icon: 'none',
    })
    getList()
  }
  showPop.value = false
}

// 获取数据
const getList = async () => {
  const res = await getCheckInList({
    pageNum: 1,
    pageSize: 1000,
  })
  dataList.value = res.data.rows || []
  console.log(res, 100)
}
</script>

<style lang="scss" scoped>
.oppbox {
  :deep(.wd-popup) {
    background: transparent !important;
  }
}
:deep() {
  .wd-input__inner {
    color: black !important;
  }
}
.contentBox {
  background-color: white;
  border-radius: 16px;
}
:deep() {
  .cardBox {
    .wd-card__title-content {
      padding: 14upx 0upx;
    }
    .wd-card__footer {
      padding: 14upx 0upx;
    }
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30upx 0upx;
  .dataTopBox {
    display: flex;
    font-size: 32upx;
    color: black;
    justify-content: space-between;
    align-items: center;
    .time {
      color: #a9a8a8;
      font-size: 24upx;
    }
  }
  .allInfo {
    .item {
      display: flex;
      align-items: center;
      line-height: 50upx;
    }
  }
}
.btnBox {
  padding: 5upx 10upx;
  display: inline-block;
  font-size: 28upx;
}
.btn1 {
  border: 1px solid #cf8428;
  color: #cf8428;
  border-radius: 10upx;
}
.btn2 {
  border: 1px solid #75c514;
  color: #75c514;
  border-radius: 10upx;
}
</style>
